<template>
  <div>
    <el-card class="sign-box">
      <template #header>
        {{ attendance.title }}
      </template>
      <div class="sign-button">
        <el-button type="danger btn-large" @click="btnSignClick">
          {{ attendance.sign_time != '' ? '完成签到' : '请签到' }}
        </el-button>
      </div>

      <div>
        {{ attendance.sign_time }}-{{ attendance.sign_time != '' ? '完成签到' : '' }}
      </div>

    </el-card>
  </div>
</template>

<!--
   ts :typescript
   setup -- vue3
-->

<!--
  this 失效
-->
<script lang="ts" setup>

import monent from 'moment'
import {ref, reactive} from "vue";
import axios from 'axios'


/**
 *  非响应式数据
 * */
/* const attendance ={
   title:'微服务-5-24',
   sign_time:''
 }*/


/**
 * 响应式数据
 * */
const attendance = reactive({
  title: '微服务-5-24',
  sign_time: ''
})

// let num = ref(1); 响应式数据


let btnSignClick = () => {

  let sign_time = monent().format('YYYY-MM-DD HH:mm:ss ',);
  let sign_time_post= monent().add(8,"hours").format('YYYY-MM-DD HH:mm:ss ',);

  axios({
    url: 'http://localhost:8080/ssign/sign',
    method: 'post',
    params: {
      studentSignId: 2,
      sign_time: sign_time_post
    }
  }).then((res) => {
    if (res.data.success) {
      attendance.sign_time = sign_time;
    }
  })


}

</script>

<style scoped>
.sign-box {
  width: 400px;
  height: 400px;
  text-align: center;
  border-radius: 50%;
  margin-left: 600px;
  margin-top: 200px;
}

.sign-button {
  margin-top: 10%;
  margin-bottom: 20px;
}

.btn-large {
  display: inline-block;
  height: 150px;
  width: 150px;
  border-radius: 30%;
  font-size: 20px;
}
</style>